<template>
  <div class="pages">
    <el-dialog
      title="设备详情"
      width="36%"
      :visible.sync="dialogFormVisible"
    >
      <div class="nav">
        <div class="box">
          <span>销售量:<span>{{ sell }}个</span></span>
          <span>销售额:<span>{{ money }}元</span></span>
          <span>补货次数:<span>{{ replenishment }}次</span></span>
          <span>维修次数:<span>{{ service }}次</span></span>
        </div>
      </div>
      <span class="header">商品销量(月)</span>
      <el-row v-if="tableData.length !== 0" :gutter="20">
        <el-col v-for="item in tableData" :key="item.index" :span="6" style="height:40px;border:1px solid #d8dde3;text-align:center;line-height:40px;color:#666;font-weight: normal;"><div class="grid-content bg-purple">{{ item.skuName }}:<span>{{ item.count }}</span></div></el-col>
      </el-row>
      <span v-else class="null">当前设备未销售商品</span>
    </el-dialog>
  </div>
</template>
<script>
import { getService, getReplenishment, getSales } from '@/api/equipment'
export default {
  name: 'PageTool',
  props: {
  },
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      total: null,
      pageIndex: 1,
      totalPage: null,
      service: null,
      replenishment: null,
      sell: null,
      money: null,
      obj: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    async openDialog(row) {
      this.dialogFormVisible = true
      console.log(row)
      console.log(row.createTime)
      const res = {
        start: row.createTime.slice(0, 10),
        end: row.updateTime.slice(0, 10),
        innerCode: row.innerCode,
        vmType: row.vmType,
        nodeId: row.nodeId,
        createUserId: row.createUserId
      }
      const data = await getService(res)
      this.service = data
      const data1 = await getReplenishment(res)
      this.replenishment = data1
      const sales = await getSales(res)
      this.tableData = sales
      this.sell = sales.reduce((prev, item) => {
        return prev + item.count
      }, 0)
      this.money = (this.sell * 3).toFixed(2)
    }
  }
}
</script>
<style scoped lang="scss">
.el-button{
    color: black;
    border-radius: 3px;
    background-color: #d5ddf8;
    border: #d5ddf8;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    margin-left: 90px;
    .text{
      margin-right: 10px;
      color: #dedfea;
    }
}
::v-deep .el-dialog{
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
}
.table{
    display: flex;
    padding: 0 70px;
    span{
      margin-right: 20px;
    }
}
p{
  margin-left:70px;
  margin-bottom: 30px;
  span{
      margin-right: 20px;
    }
}
.el-table{
  font-weight: normal;
}
.nav{
    width: 600px;
    height: 70px;
    background-color: #f3f6fb;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.box span{
    margin-left: 50px;
    font-weight: normal;
    span{
      margin-left: 10px;
      color: #6589ff;
    }
}
.el-col{
    span{
      margin-left: 10px;
    }
}
.header{
  margin-left: 28px;
 color: #666;
 font-weight: normal;
}
.el-row{
  margin: 20px 0;
  padding: 0 35px;
}
.null{
  display: block;
  margin-top: 50px;
  margin-left: 250px;
  font-weight: normal;
}
</style>
